<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQueri</title>
</head>
<body>
    <style>
         .redElm {
            background: red;
             color: white;
         } 
          .btn{
             font-size: 10px;
         }
         /* .a{
             width: 200px;
             height: 200px;
             background-color: yellow;
         } */
   </style>
   <div id="dd" class="a">
   </div>  
   

  <script src="js/abdula.js"></script>
  <script>


      
        //    $('#dd').on('mouseover', function () {
        //        console.log("The Mouse Enter Button.");
        //     })
        // $('#dd').on('mouseout', function () {
        //     console.log("The Mouse Outside The Button.");
        //     });

        // $('#dd').on('mousemove', function () {
        //     console.log("The Mouse MOving the Button.");
        //     });
            //   $('#dd').on('mousedown', function () {
            //     console.log("The Mouse Down.");
            //  });
            //    $('#dd').on('mouseup', function () {
            //      console.log("The Mouse UP.");
            //   });
            // $('#dd').on('click', function () {
            //     console.log("The Mouse Clicked.");
            //  });

            var html = '';
            for (var i = 0; i < 100; i++) {
                html += ('<button class="btn" style="margin:10px;position:relative;">Button' + (i + 1) + '</button>');
            }
            $('#dd').html(html);
            // $('button').on('click', function () {
            //      var a = $(this).html();
            //      console.log(a);
            //  });
            $('button').on('click', function () {
                 let that = $(this);
                 that.css('transform', 'scale(1)');
                 that.animate({
                     top: '500px'
                 }, 2000);
              });
            //  $('button').on('click', function () {
            //     let that = $(this);
            //     let a = that.html();
            //     that.attr("style","color:red");
            //     that.css("background-color","blue");
            //     console.log(a);
            //   });
            //    $('button').on('mouseover', function () {
            //        $(this).addClass('redElm');
            //    });

            //  $('button').on('mouseout', function () {
            //      $(this).removeClass('redElm');
            //  });


        

       

  </script>
</body>
</html>